import React from "react";
import { Card } from 'antd';
// import echarts from 'echarts/lib/echarts'// 引入 ECharts 主模块
import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts/core';
import './familyPartyRecord.scss';





const gridStyle = {
  width: '25%',
  textAlign: 'center',
};
export default ()=>{
    
    const getOption = ()=>{
    return(
        {
            title: {
              text: '用户性别比例',
              left: 'center'
            },
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: '用户性别比例',
                type: 'pie',
                radius: '50%',
                data: [
                  { value: 300, name: '女' },
                  { value: 478, name: '男' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }

    )
}

    const atOption = ()=>{
      
      return(
        {
          title: {
            text: '歌曲类型分布',
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: ['华语', '粤语', '欧美', '日韩', 'BGM', '轻音乐', '乐器']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [16, 12, 14, 14, 11, 14, 12],
              type: 'bar'
            }
          ]
        }
      )
    }

    const sinOption = ()=>{
      return(
        {
          title: {
            text: '歌手性别比例',
            subtext: 'Fake Data',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '歌手性别比例分布',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 22, name: '男' },
                { value: 4, name: '组合' },
                { value: 2, name: '不明' },
                { value: 12, name: '女' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        }
      )
    }

    const CunOption = ()=>{
      return(
        {
          title: {
            text: '歌手国籍分布',
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: ['中国', '韩国', '日本', '美国', '新加坡', '意大利', '马来西亚']
          },
          yAxis: {
            type: ''
          },
          series: [
            {
              data: [15, 6, 1, 5, 1, 1, 1],
              type: 'bar'
            }
          ]
        }
      )
    }

return (
    <div className="first">
        <div className="first-top">
          <Card.Grid style={gridStyle}>
            <h2>8</h2>
            <div>用户总数</div>
          </Card.Grid>
          <Card.Grid style={gridStyle}>
          <h2>111</h2>
            <div>歌曲总数</div>
          </Card.Grid>
          <Card.Grid style={gridStyle}>
          <h2>38</h2>
            <div>歌手数量</div>
          </Card.Grid>
          <Card.Grid style={gridStyle}>
          <h2>84</h2>
            <div>歌单数量</div>
          </Card.Grid>
        </div>
        <div className="first-center">
            <div className="first-center-left">
              <ReactEcharts option={getOption()} theme="imooc"></ReactEcharts>
            </div>
            <div className="first-center-right">
                <ReactEcharts option={atOption()} theme="imooc"></ReactEcharts>
            </div>
        </div>
        <div className="first-center">
            <div className="first-center-left">
              <ReactEcharts option={sinOption()} theme="imooc"></ReactEcharts>
            </div>
            <div className="first-center-right">
                <ReactEcharts option={CunOption()} theme="imooc"></ReactEcharts>
            </div>
        </div>
      
    </div>
)
}
